﻿
@{
    Layout = null;
}
<h2>UserChat</h2>  
<script src="~/Scripts/jquery-1.10.2.js"></script>  
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="~/signalr/hubs"></script>  
<script type="text/javascript">  
    var clients = [];  
    var chat;
    var target = '@ViewBag.target';
    var orderNO = '@ViewBag.orderNO';
    $(function () {  
        
        chat = $.connection.UserHub;  
        console.info(chat);
        chat.client.notify = function (data) {
            debugger;
            alert(data);
        };
        //显示提示方法  
        chat.client.showMessage = function (message) {
            //debugger;
            alert(message);  
        }  
        //注册显示信息的方法  
        chat.client.addMessage = function (message, connectionId) {  
            //debugger;
            if ($.inArray(connectionId, clients)==-1) {  
                showWin(connectionId);  
            }  
            $("#" + connectionId).find("ul").each(function () {  
                $(this).append('<li>'+message+'</li>');  
            })  
        }  
        //注册显示所有用户的方法  
        chat.client.getUsers = function (data) {  
            //debugger;
            if (data) {  
                var json = $.parseJSON(data);  
                  
                console.info(json);  
                $("#users").html(" ");  
                for (var i = 0; i < json.length; i++) {  
                    var html = '<li>用户名:' + json[i].Name + '<button connectionId="' + json[i].ConnectionID + '" onclick="userChat(this)">聊天</button>';  
                    $("#users").append(html);  
                }  
            }  
        }  
        //注册显示推出聊天提示的方法  
        chat.client.exitUser = function (data)  
        {
           // debugger;
            alert(data);  
        }  
        //注册显示个人信息的方法  
        chat.client.showId = function (data)  
        {
            //debugger;
            $("#conId").html(data);  
            clients.push(data);  
        }  
        //获取用户名称  
     //   $('#userName').html(prompt('请输入您的名称', ''));  
  
        //连接成功后获取自己的信息  
        $.connection.hub.start().done(function () {
            //debugger;
            ////chat.server.getName($('#userName').html());
            //if (orderNO) {
                chat.server.getName(orderNO);
            //}
            //if (target) {
            //    chat.server.sendMessage(target, "成功");
            //}
            
        });  
    });  
    //开始聊天  
    function userChat(obj)  
    {  
        var connectionId = $(obj).attr('connectionId');  
        showWin(connectionId);  
    }  
    function  showWin(connectionId)  
    {  
        //var connectionId = $(obj).attr('connectionId');  
        clients.push(connectionId);  
        var html = '<div style="float:left;margin-left:30px;border:double" id="' + connectionId + '" connectionId="' + connectionId + '">' + connectionId + '"的房间聊天记录如下:<button onclick="exitChat(this)">退出</button><ul></ul><input type="text" /> <button onclick="sendMessage(this)">发送</button></div>';  
        $("#userBox").append(html);  
    }  
    function exitChat(btnObj)  
    {  
        //debugger  
        //  var connectionId = $(btnObj).parent().attr("connectionId");  
        $(btnObj).parent().remove();  
        //chat.server.exitChat(connectionId);  
    }  
    //发送消息  
    function sendMessage(data)
    {  
        //var message = $(data).prev().val();  
        //var  userObj = $(data).parent();  
        //var username = $("#userName").html();  
        //message = username + ":" + message;  
        //console.info($(userObj).attr("connectionId"));  
        //var targetConnectionId = $(userObj).attr("connectionId");  
        //chat.server.sendMessage(targetConnectionId, message);  
        //$(data).prev().val("");  
        chat.server.sendMessage(data, message);
    }  
</script>  
<div>  
    <div>名称：<p id="userName"></p></div>  
    <div>ConnectionID:<p id="conId"></p></div>  
      
    <div style="width:25%;border:1px solid #ff0000">  
        <div>在线用户列表</div>  
        <ul id="users"></ul>  
    </div>  
    <div id="userBox">  
    </div>  
</div>  
